<template>
    <div class="main">
        <group gutter="0">
            <datetime
                v-model="startTime"
                title="选择开始时间:"
            >
            </datetime>
            <datetime
                v-model="endTime"
                title="选择结束时间:"
            >
            </datetime>
        </group>
        <div class="ovh">
            <button class="btn fl" @click="search(true)">搜索</button>
            <button style="background: #ddd" class="btn fl" @click="search(false)">取消</button>
        </div>

        <template v-for="item in myData">
            <group>
                <cell title="订单号" :value="item.orderid"></cell>
                <cell-form-preview :list="item.detail"></cell-form-preview>
            </group>
        </template>
        <button class="dis-b loadMore" v-if="moreData" @click="loadMore">点击查看更多</button>
        <no-data v-if="noData"></no-data>
    </div>
</template>

<script>
    import {CellFormPreview} from 'vux'
    import util from "../../fetch/util";
    let that;
    export default {
        name: "record",
        components: {
            CellFormPreview,
        },
        data() {
            return {
                noData: false,
                list: [],
                myData: [],
                startTime: '',
                endTime: '',
                moreData: false,
                pageId: 0,
                last_page: 0,
            }
        },
        methods: {
            getData(pageId) {
                console.log(this.$route.query);
                let id = JSON.parse(localStorage.getItem('userInfo')).id;
                let params = {
                    id: id,
                    startDay: '1997-1-1',
                    endDay: '2999-1-1',
                    current_page: pageId
                };
                if(this.$route.query.type === 1){
                    params.type = 1;
                } else {
                    params.type = 0;
                }
                //console.log(that.$router.query);
                if (this.startTime) {
                    params.startDay = this.startTime;
                }
                if (this.endTime) {
                    params.endDay = this.endTime;
                }
                util.fetchGet(util.path.record, params).then((data) => {
                    if (data.code === 0) {
                        let thisData = data.data,
                            dataList = thisData.data;
                        if (thisData.total <= 0) {
                            this.noData = true;
                            this.moreData = false;
                        } else {
                            this.myData = dataList;
                            this.noData = false;
                            this.moreData = true;
                            this.last_page = thisData.last_page;
                            if (thisData.total < 10 || dataList.length < 10) {
                                this.moreData = false;
                            }
                            console.log(dataList);
                            this.list = [];
                            for (let i = 0; i < dataList.length; i++) {
                                dataList[i].detail = [];
                                dataList[i].detail.push({
                                    label: '充值玩家ID：',
                                    value: dataList[i].payerid
                                }, {
                                    label: '金额：',
                                    value: dataList[i].reqfee/100 + '元'
                                }, {
                                    label: '类型：',
                                    value: dataList[i].itemtype === 0 ? '钻石' : '金币'
                                }, {
                                    label: '数量：',
                                    value: dataList[i].itemvalue
                                }, {
                                    label: '状态：',
                                    value: dataList[i].status === 1 ? '充值成功' : '等待付款'
                                }, {
                                    label: '日期：',
                                    value: dataList[i].ordertime
                                })
                            }
                        }

                    } else {
                        console.log(data);
                    }
                });
            },
            search(type) {
                if (!type) {
                    this.startTime = '';
                    this.endTime = '';
                }
                this.pageId = 0;
                this.myData = [];
                this.moreData = true;
                this.getData(this.pageId);
            },
            loadMore() {
                this.pageId++;
                this.getData(this.pageId);
            },
        },
        mounted() {
            that = this;
            this.getData(this.pageId);
        }
    }
</script>

<style scoped>
    .btn {
        width: 50%;
        line-height: 40px;
        background: #00ADDE;
        color: #fff;
        font-size: 16px;
    }
</style>
